<template>
    <div class="header">
        <div class="left">
            <img src="../assets/images/logo.png" class="logo">
            <span style="margin-right: 30px;font-size: 14px;" v-if="$route.name !== 'Login'">{{companyName}}</span>
            <span class="date">{{getDate()}}</span>
        </div>
        <div class="right" v-if="$route.path !== '/login'">
            <a href="javascript:;" class="item"><img src="../assets/images/logo2.png" alt=""/>帮助</a>
            <a href="javascript:;" class="item"><img src="../assets/images/messege.png" alt=""/>消息</a>
            <a href="javascript:;" class="item"><img src="../assets/images/logo1.png" alt=""/>首页</a>
            <a href="javascript:;" class="item"><img src="../assets/images/logo2.png" alt=""/>常见问题</a>
            <a href="javascript:;" class="item"><img src="../assets/images/logo3.png" alt=""/>意见反馈</a>
            <div class="item">
                <div class="headImg"></div>
                <el-dropdown trigger="click">
                <span class="el-dropdown-link username">
                    {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>切换账套</el-dropdown-item>
                    <el-dropdown-item>设置</el-dropdown-item>
                    <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
/*
*  name: 'iissoftware'
*  description: 'Header组件' 
*/
export default {
    data() {
        return {
            // username: ''
        }
    },
    computed: {
        username() {
            return this.$store.state.username;
        },
        companyName() {
            return this.$store.state.companyName;
        }
    },
    methods: {
        getSystemInfo() {           //获取系统信息
            this.$http.get(this.$url + 'systemParameters/selectSystemInfo').then(res => {
                if(res.data.code == 20001) {
                    if(res.data.data) {
                        this.$store.commit('updateSystemInfo', res.data.data);
                        this.$store.commit('updateCompanyNames', res.data.data['companyNameChinese']);
                        this.$store.commit('updateSystemId', res.data.data['id']);
                    }
                }
            });
        },
        setUsername() {     //设置用户名
            if(sessionStorage.getItem('isLogin')) {
                let isLogin = JSON.parse(sessionStorage.getItem('isLogin'));
                if(isLogin) {
                    this.$store.commit('updateUsername', isLogin['username']);
                }
            }
        },
        getDate() {
            let date = new Date(),
                year = date.getFullYear(),
                month = date.getMonth() + 1,
                day = date.getDate();
            if(month < 10) month = '0' + month;
            if(day < 10) day = '0' + day;
            return year + '/' + month + '/' + day;
        },
        logout() {          //退出登录
            this.$message({message: '退出成功', type: 'success', duration: 1000});
            sessionStorage.removeItem('isLogin');
            setTimeout(() => {
                this.$router.push('/login');
            }, 1000);
        },
        getPermission(){                       //获取用户权限
            this.$http.post(this.$url + 'userManage/menu').then(res => {
                if(res.data.code == 20001) {
                    if(res.data.data && res.data.data.length > 0) {
                        this.$store.commit('updatePermission', res.data.data);
                    }
                }
            });
        }
    },
    mounted() {
        if(this.$route.path !== '/login') {
            this.setUsername();
            this.getPermission();
            this.getSystemInfo();
        }
    }
}
</script>
<style scoped>
    .header {
        background-color: #fff;
        width: 100%;
        height: 60px;
        line-height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }
    .left {padding-left: 25px;}
    .left .date {font-size: 12px;}
    .logo {margin-right: 30px;}
    .right {padding-right: 25px;}
    .right .item{
        color: #666;
        margin-left: 20px;
        display: inline-block;
    }
    .right .item > img {margin-top: -2px;margin-right: 5px;}
    .right .item .headImg {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #dfdfdf;
        vertical-align: middle;
        display: inline-block;
    }
</style>